<html lang="en">

<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>桌面应用开发漫谈 - 萝卜墩儿</title>
<link rel="shortcut icon" href="https://rememberber.github.io//favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.2.0/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css">
<link rel="stylesheet" href="https://rememberber.github.io//media/css/tailwind.css">
<link rel="stylesheet" href="https://rememberber.github.io//styles/main.css">
<link rel="alternate" type="application/atom+xml" title="桌面应用开发漫谈 - 萝卜墩儿 - Atom Feed" href="https://rememberber.github.io//atom.xml">

    

  <meta name="description" content="
不得不承认，当今已经是web时代，移动互联网时代，PC的桌面应用开发大部分也只能局限在行业/领域应用软件了。
不过，生产力、效率提升、工具类的桌面应用依然是我们日常最得力的助手。
作为一个业余Geek，有自己动手开发桌面工具情结，我倒是在..." />
  <meta property="og:title" content="桌面应用开发漫谈 - 萝卜墩儿">
  <meta property="og:description" content="
不得不承认，当今已经是web时代，移动互联网时代，PC的桌面应用开发大部分也只能局限在行业/领域应用软件了。
不过，生产力、效率提升、工具类的桌面应用依然是我们日常最得力的助手。
作为一个业余Geek，有自己动手开发桌面工具情结，我倒是在..." />
  <meta property="og:type" content="articles">
  <meta property="og:url" content="https://rememberber.github.io/post/zhuo-mian-ying-yong-kai-fa-man-tan/" />
  <meta property="og:image" content="https://rememberber.github.io//post-images/zhuo-mian-ying-yong-kai-fa-man-tan.png">
  <meta property="og:image:height" content="630">
  <meta property="og:image:width" content="1200">
  <meta name="twitter:title" content="桌面应用开发漫谈 - 萝卜墩儿">
  <meta name="twitter:description" content="
不得不承认，当今已经是web时代，移动互联网时代，PC的桌面应用开发大部分也只能局限在行业/领域应用软件了。
不过，生产力、效率提升、工具类的桌面应用依然是我们日常最得力的助手。
作为一个业余Geek，有自己动手开发桌面工具情结，我倒是在...">
  <meta name="twitter:card" content="summary_large_image">
  <link rel="canonical" href="https://rememberber.github.io/post/zhuo-mian-ying-yong-kai-fa-man-tan/">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.css">
 
  
    <link rel="stylesheet" href="https://rememberber.github.io//media/css/prism-atom-dark.css">
  

  
</head>

<body>
  <div class="antialiased flex flex-col min-h-screen" id="app">
    <a href="https://rememberber.github.io/" class="fixed top-0 left-0 mt-4 bg-black text-white dark:text-gray-700 dark:bg-yellow-50 dark:hover:bg-black dark:hover:text-white inline-flex p-2 pl-8 hover:text-gray-700 hover:bg-yellow-50 font-bold z-10 transition-fast animated fadeInLeft">
      萝卜墩儿
    </a>
    <div class="max-w-4xl w-full mx-auto">
      <div class="shadow-box bg-white dark:bg-gray-600 rounded-lg pt-32 md:pt-64 px-4 md:px-8 pb-8 animated fadeIn mb-8">
        <h1 class="text-5xl font-semibold leading-normal pb-8 mb-8 border-b-8 border-gray-700">
          桌面应用开发漫谈
        </h1>
        
          <img src="https://rememberber.github.io//post-images/zhuo-mian-ying-yong-kai-fa-man-tan.png" alt="桌面应用开发漫谈" class="block w-full mb-8">
        
        <div class="mb-8 flex flex-wrap">
          <div class="text-gray-400 text-sm mr-4">2020-06-10 · 5 min read</div>
          
            <a href="https://rememberber.github.io/tag/4fExNibod/" class="text-gray-700 text-sm border-b-2 border-dotted border-gray-200 hover:border-gray-600 transition-all duration-100 inline-flex mr-2">
              <i class="ri-hashtag"></i>
              桌面应用
            </a>
          
            <a href="https://rememberber.github.io/tag/WlAVv35mMw/" class="text-gray-700 text-sm border-b-2 border-dotted border-gray-200 hover:border-gray-600 transition-all duration-100 inline-flex mr-2">
              <i class="ri-hashtag"></i>
              GUI
            </a>
          
            <a href="https://rememberber.github.io/tag/Cm0OSjbZHf/" class="text-gray-700 text-sm border-b-2 border-dotted border-gray-200 hover:border-gray-600 transition-all duration-100 inline-flex mr-2">
              <i class="ri-hashtag"></i>
              界面
            </a>
          
            <a href="https://rememberber.github.io/tag/Z0tlVYiaZb/" class="text-gray-700 text-sm border-b-2 border-dotted border-gray-200 hover:border-gray-600 transition-all duration-100 inline-flex mr-2">
              <i class="ri-hashtag"></i>
              swing
            </a>
          
            <a href="https://rememberber.github.io/tag/tFul5mOLkS/" class="text-gray-700 text-sm border-b-2 border-dotted border-gray-200 hover:border-gray-600 transition-all duration-100 inline-flex mr-2">
              <i class="ri-hashtag"></i>
              electron
            </a>
          
        </div>
        <div class="markdown mb-8" v-pre>
          <blockquote>
<p>不得不承认，当今已经是web时代，移动互联网时代，PC的桌面应用开发大部分也只能局限在行业/领域应用软件了。<br>
不过，生产力、效率提升、工具类的桌面应用依然是我们日常最得力的助手。<br>
作为一个业余Geek，有自己动手开发桌面工具情结，我倒是在桌面应用开发上“浪费”过一些精力，现将自己的经验做些总结，希望对也想入坑的小伙伴提供点参考。</p>
</blockquote>
<!-- more -->
<h2 id="web盛行的今天桌面应用开发还有什么意义">web盛行的今天，桌面应用开发还有什么意义</h2>
<h3 id="都0202年了还谈桌面应用">都0202年了还谈桌面应用？</h3>
<p>说实话意义确实不大，以下是几种可能的意义</p>
<ul>
<li>找回最初的编程动机，毕竟在学编程之前，很多人对编程的理解都是开发个“软件”</li>
<li>将常用小脚本界面化，写插件</li>
<li>服务于web开发，让web开发更爽</li>
<li>在业余精力不多的情况下获得成就感</li>
<li>接地气</li>
</ul>
<h3 id="web开发者鄙视桌面应用开发者">Web开发者鄙视桌面应用开发者？</h3>
<p>不一定，桌面开发所需要具备的技术能力和难度不一定比web开发差，换句话说让web开发者开发桌面应用未必you can up</p>
<h3 id="桌面开发效率低">桌面开发效率低？</h3>
<p>不尽然，不过受web生态发展迅速的影响，会有一些组件和框架的差距</p>
<h3 id="有没有学习成本不高上手较快的快速实践办法">有没有学习成本不高，上手较快的快速实践办法？</h3>
<p>熟悉前端的可以考虑electron，<br>
习惯Java的可以用一些GUI辅助工具，比如IntelliJ自带的GUI Designer实现拖动组件快速构建界面</p>
<h3 id="尽量和现有web开发习惯相似">尽量和现有Web开发习惯相似？</h3>
<p>electron<br>
<a href="https://www.electronjs.org/">Electron | 使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用</a></p>
<h3 id="桌面开发应该是前端的工作吗">桌面开发应该是前端的工作吗？</h3>
<p>按理说是应该这样，不过现在除了使用前端语言的包壳做法以外，其他的UI组件和逻辑代码还是没有很好的解耦</p>
<h2 id="常见桌面应用分析">常见桌面应用分析</h2>
<p>IM(微信/咚咚)<br>
Mail(outlook等)<br>
IDE（IntelliJ/WebStorm/VSCode/PyCharm……）<br>
浏览器（chrome/Firefox/opera……）<br>
办公套装（MSOffice/WPS/Adobe系列/PDF查看批注……）<br>
本地工具（ Navicat/SwitchHost/Typora/Postman ）<br>
笔记思绪（ OneNote/Xmind/各种TodoList…… ）<br>
媒体播放（ 网易云音乐/qq音乐…… ）<br>
生产/工业控制（CAD，各种车间操作台…… ）<br>
PC游戏（绝地求生、孤岛危机、极品飞车……）</p>
<h2 id="桌面应用开发常见技术框架gui库">桌面应用开发常见技术/框架/GUI库</h2>
<figure data-type="image" tabindex="1"><img src="https://rememberber.github.io//post-images/1591755069988.png" alt="" loading="lazy"></figure>
<table>
<thead>
<tr>
<th>框架/类库</th>
<th>语言/开发环境</th>
<th>适用平台</th>
<th>案例</th>
</tr>
</thead>
<tbody>
<tr>
<td>Qt（C++图形用户界面应用程序开发框架）</td>
<td>C/C++</td>
<td>跨平台</td>
<td>WPS/极品飞车/AutoDesk/VLC……</td>
</tr>
<tr>
<td>WPF（微软用户界面框架）</td>
<td>.NET/C#/VB等</td>
<td>Windows</td>
<td>前后台分离（XAML、矢量图）应用广泛</td>
</tr>
<tr>
<td>WinForm</td>
<td>.NET/C#</td>
<td>Windows</td>
<td>早期QQ</td>
</tr>
<tr>
<td>MFC（微软类库）</td>
<td>C/C++</td>
<td>Windows</td>
<td>绘图/工业控制等</td>
</tr>
<tr>
<td>Swing/JavaFx/SWT</td>
<td>Java</td>
<td>跨平台</td>
<td>IntelliJ IDEA/eclipse</td>
</tr>
<tr>
<td>NW.js（node-webkit）</td>
<td>HTML/CSS/JS</td>
<td>跨平台</td>
<td>微信桌面版</td>
</tr>
<tr>
<td>Electron</td>
<td>HTML/CSS/JS</td>
<td>跨平台</td>
<td>VSCode/Typro/Postman/Skype/WhatsApp/Slack……</td>
</tr>
</tbody>
</table>
<h2 id="桌面应用常见需求">桌面应用常见需求</h2>
<ul>
<li>工具属性</li>
<li>本地计算/本地数据</li>
<li>本地软硬件接口/打印机扫描仪</li>
<li>快速响应/无网络运行</li>
<li>WebView</li>
</ul>
<h2 id="java桌面应用开发">Java桌面应用开发</h2>
<p>--我们最容易上手，语言最熟悉<br>
<strong>优点：</strong></p>
<ul>
<li>Java语言易上手</li>
<li>丰富的后端maven库</li>
<li>跨平台</li>
</ul>
<p><strong>缺点：</strong></p>
<ul>
<li>启动稍慢</li>
<li>UI相关基础建设差，矢量图形支持差</li>
<li>不支持webview</li>
</ul>
<p><strong>实例：</strong><br>
<a href="https://github.com/JetBrains/intellij-community">intellij-community</a><br>
<a href="https://github.com/itsonglin/wechat_desktop">wechat_desktop</a><br>
<a href="https://github.com/rememberber/MooTool">MooTool</a></p>
<p>--后面我会单独写一篇详细介绍如何不想投入太多学习成本，<strong>基于IntelliJ快速实现Swing界面</strong><br>
以及LookAndFeel、和spring结合、JavaFX、SWT、JNI等</p>
<h2 id="electron桌面应用开发">Electron桌面应用开发</h2>
<p>--当下最流行，UI表现力最强，优点最多<br>
<strong>优点：</strong></p>
<ul>
<li>开源</li>
<li>Web前端开发语言</li>
<li>丰富完善的UI基础建设，海量视觉，可胜任复杂交互和组件</li>
<li>Chrome内核，WebView无压力</li>
<li>跨平台</li>
</ul>
<p><strong>缺点：</strong></p>
<ul>
<li>启动稍慢</li>
<li>内存占用大</li>
<li>对于后端同学需要充值前端能力</li>
</ul>
<p><strong>实例：</strong><br>
<a href="https://electronjs.org/apps/wewe-chat">wewe-chat</a><br>
<a href="https://electronjs.org/apps">https://electronjs.org/apps</a></p>
<h2 id="相比于web桌面应用开发需要额外考虑的">相比于Web，桌面应用开发需要额外考虑的</h2>
<ul>
<li>用户本地数据存储</li>
<li>应用本地配置</li>
<li>系统文件权限</li>
<li>系统托盘</li>
<li>剪贴板操作</li>
<li>系统软（环境变量）硬件（处理器内存显卡显示器分辨率等）环境</li>
<li>注册表、可执行文件、安装包制作</li>
<li>卸载清理处理，桌面应用道德规范</li>
<li>版本迭代，强制更新考虑</li>
<li>平滑升级</li>
<li>基础建设（撤销/重做，滚动条等）</li>
<li>布局，icon，lancher，圆角等等</li>
</ul>

        </div>
        <!-- Share to Twitter, Weibo, Telegram -->
        <div class="flex items-center">
          <div class="mr-4 flex items-center">
            <i class="ri-share-forward-line text-gray-500"></i>
          </div>
          <div class="px-4 cursor-pointer text-blue-500 hover:bg-blue-100 dark:hover:bg-gray-600 inline-flex" @click="shareToTwitter">
            <i class="ri-twitter-line"></i>
          </div>
          <div class="px-4 cursor-pointer text-red-500 hover:bg-red-100 dark:hover:bg-gray-600 inline-flex" @click="shareToWeibo">
            <i class="ri-weibo-line"></i>
          </div>
          <div class="px-4 cursor-pointer text-indigo-500 hover:bg-indigo-100 dark:hover:bg-gray-600 inline-flex" @click="shareToTelegram">
            <i class="ri-telegram-line"></i>
          </div>
        </div>
      </div>

      

      

      <footer class="py-12 text-center px-4 md:px-0" v-pre>
  Powered by <a href="https://github.com/getgridea/gridea" target="_blank">Gridea</a>
</footer>
    </div>

    <!-- TOC Container -->
    <div class="fixed right-0 bottom-0 mb-16 mr-4 shadow w-8 h-8 rounded-full flex justify-center items-center z-10 cursor-pointer bg-white dark:bg-gray-500 dark:text-gray-200 hover:shadow-lg transition-all animated fadeInRight" @click="showToc = true">
      <i class="ri-file-list-line"></i>
    </div>

    <div class="fixed right-0 top-0 bottom-0 overflow-y-auto w-64 bg-white dark:bg-gray-800 p-4 border-l border-gray-100 dark:border-gray-600 z-10 transition-fast" :class="{ '-mr-64': !showToc }">
      <div class="flex mb-4 justify-end">
        <div class="w-8 h-8 inline-flex justify-center items-center rounded-full cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 transition-fast" @click="showToc = false">
          <i class="ri-close-line text-lg"></i>
        </div>
      </div>
      <div class="post-toc-container">
        <ul class="markdownIt-TOC">
<li>
<ul>
<li><a href="#web%E7%9B%9B%E8%A1%8C%E7%9A%84%E4%BB%8A%E5%A4%A9%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%E8%BF%98%E6%9C%89%E4%BB%80%E4%B9%88%E6%84%8F%E4%B9%89">web盛行的今天，桌面应用开发还有什么意义</a>
<ul>
<li><a href="#%E9%83%BD0202%E5%B9%B4%E4%BA%86%E8%BF%98%E8%B0%88%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8">都0202年了还谈桌面应用？</a></li>
<li><a href="#web%E5%BC%80%E5%8F%91%E8%80%85%E9%84%99%E8%A7%86%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%E8%80%85">Web开发者鄙视桌面应用开发者？</a></li>
<li><a href="#%E6%A1%8C%E9%9D%A2%E5%BC%80%E5%8F%91%E6%95%88%E7%8E%87%E4%BD%8E">桌面开发效率低？</a></li>
<li><a href="#%E6%9C%89%E6%B2%A1%E6%9C%89%E5%AD%A6%E4%B9%A0%E6%88%90%E6%9C%AC%E4%B8%8D%E9%AB%98%E4%B8%8A%E6%89%8B%E8%BE%83%E5%BF%AB%E7%9A%84%E5%BF%AB%E9%80%9F%E5%AE%9E%E8%B7%B5%E5%8A%9E%E6%B3%95">有没有学习成本不高，上手较快的快速实践办法？</a></li>
<li><a href="#%E5%B0%BD%E9%87%8F%E5%92%8C%E7%8E%B0%E6%9C%89web%E5%BC%80%E5%8F%91%E4%B9%A0%E6%83%AF%E7%9B%B8%E4%BC%BC">尽量和现有Web开发习惯相似？</a></li>
<li><a href="#%E6%A1%8C%E9%9D%A2%E5%BC%80%E5%8F%91%E5%BA%94%E8%AF%A5%E6%98%AF%E5%89%8D%E7%AB%AF%E7%9A%84%E5%B7%A5%E4%BD%9C%E5%90%97">桌面开发应该是前端的工作吗？</a></li>
</ul>
</li>
<li><a href="#%E5%B8%B8%E8%A7%81%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8%E5%88%86%E6%9E%90">常见桌面应用分析</a></li>
<li><a href="#%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%E5%B8%B8%E8%A7%81%E6%8A%80%E6%9C%AF%E6%A1%86%E6%9E%B6gui%E5%BA%93">桌面应用开发常见技术/框架/GUI库</a></li>
<li><a href="#%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8%E5%B8%B8%E8%A7%81%E9%9C%80%E6%B1%82">桌面应用常见需求</a></li>
<li><a href="#java%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91">Java桌面应用开发</a></li>
<li><a href="#electron%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91">Electron桌面应用开发</a></li>
<li><a href="#%E7%9B%B8%E6%AF%94%E4%BA%8Eweb%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%E9%9C%80%E8%A6%81%E9%A2%9D%E5%A4%96%E8%80%83%E8%99%91%E7%9A%84">相比于Web，桌面应用开发需要额外考虑的</a></li>
</ul>
</li>
</ul>

      </div>
    </div>

    <!-- Back to top -->
    <div class="fixed right-0 bottom-0 mb-4 mr-4 shadow w-8 h-8 rounded-full flex justify-center items-center z-10 cursor-pointer bg-white hover:shadow-lg transition-all dark:bg-gray-500 dark:text-gray-200" @click="backToUp" v-show="scrolled">
      <i class="ri-arrow-up-line"></i>
    </div>
  </div>

  <!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  <!-- Background of PhotoSwipe. 
        It's a separate element as animating opacity is faster than rgba(). -->
  <div class="pswp__bg">
  </div>
  <!-- Slides wrapper with overflow:hidden. -->
  <div class="pswp__scroll-wrap">
    <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
    <div class="pswp__container">
      <div class="pswp__item">
      </div>
      <div class="pswp__item">
      </div>
      <div class="pswp__item">
      </div>
    </div>
    <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
    <div class="pswp__ui pswp__ui--hidden">
      <div class="pswp__top-bar">
        <!--  Controls are self-explanatory. Order can be changed. -->
        <div class="pswp__counter">
        </div>
        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
        <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
        <!-- element will get class pswp__preloader--active when preloader is running -->
        <div class="pswp__preloader">
          <div class="pswp__preloader__icn">
            <div class="pswp__preloader__cut">
              <div class="pswp__preloader__donut">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
        <div class="pswp__share-tooltip">
        </div>
      </div>
      <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
      </button>
      <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
      </button>
      <div class="pswp__caption">
        <div class="pswp__caption__center">
        </div>
      </div>
    </div>
  </div>
</div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://rememberber.github.io//media/scripts/main.js"></script>
  
  <!-- Code Highlight -->
  
    <script src="https://rememberber.github.io//media/prism.js"></script>
    <script>
      Prism.highlightAll()
    </script>
  

  <script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script>
  <script>
    //拿到预览框架，也就是上面的html代码
    var pswpElement = document.querySelectorAll('.pswp')[0];
    //定义图片数组变量
    var imgitems;
    /**
    * 用于显示预览界面
    * @param index 图片数组下标
    */
    function viewImg(index) {
      //其它选项这里不做过多阐述，详情见官网
      var pswpoptions = {
        index: parseInt(index, 10), // 开始幻灯片索引。0是第一张幻灯片。必须是整数，而不是字符串。
        bgOpacity: 0.7, // 背景透明度，0-1
        maxSpreadZoom: 3, // 缩放级别，不要太大
      };
      //初始化并打开PhotoSwipe，pswpElement对应上面预览框架，PhotoSwipeUI_Default为皮肤，imgitems为图片数组，pswpoptions为选项
      var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, imgitems, pswpoptions);
      gallery.init()
    }
    /**
    * 用于添加图片点击事件
    * @param img 图片元素
    * @param index 所属下标（在imgitems中的位置）
    */
    function addImgClick(img, index) {
      img.onclick = function() {
        viewImg(index)
      }
    }
    /**
    * 轮询所有图片，获取src、width、height等数据，加入imgitems，并给图片元素添加事件
    * 最好在onload中执行该方法，本站因放在最底部，所以直接初始化
    * 异步加载图片可在图片元素创建完成后调用此方法
    */
    function initImg() {
      //重置图片数组
      imgitems = [];
      //查找class:markdown 下的所有img元素并遍历
      var imgs = document.querySelectorAll('.markdown img');
      for (var i = 0; i < imgs.length; i++) {
        var img = imgs[i];
        //本站相册初始为loading图片，真实图片放在data-src
        var ds = img.getAttribute("data-src");
        //创建image对象，用于获取图片宽高
        var imgtemp = new Image();
        //判断是否存在data-src
        if (ds != null && ds.length > 0) {
          imgtemp.src = ds
        } else {
          imgtemp.src = img.src
        }
        //判断是否存在缓存
        if (imgtemp.complete) {
          var imgobj = {
            "src": imgtemp.src,
            "w": imgtemp.width,
            "h": imgtemp.height,
          };
          imgitems[i] = imgobj;
          addImgClick(img, i);
        } else {
          console.log('进来了2')
          imgtemp.index = i;
          imgtemp.img = img;
          imgtemp.onload = function() {
            var imgobj = {
              "src": this.src,
              "w": this.width,
              "h": this.height,
            };
            //不要使用push，因为onload前后顺序会不同
            imgitems[this.index] = imgobj
            //添加点击事件
            addImgClick(this.img, this.index);
          }
        }
      }
    }
    //初始化
    initImg();
  </script>
  
  
</body>

</html>